<template>
    <div class="login-container">
        <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=548363586,3112931032&fm=26&gp=0.jpg" class="login-img">
        <div class="login-content">
            <h5>小猪猪烤肉系统登录</h5>
            <el-input v-model="input" placeholder="请输入内容" clearable></el-input>
            <el-input type="password" v-model="pwd" placeholder="请输入密码" show-password clearable></el-input>
            <p style="color:#f00;margin-left:10px; margin-bottom:5px" v-show="errTips">x 您的用户名或密码有误</p>
            <el-button type="warning" @click="login">登录</el-button>
            
            <slide-verify :l="42"
            :r="10"
            :w="310"
            :h="155"
            ref="myverify"
            v-show="isshow"
            slider-text="向右滑动"
            @success="onSuccess"
            @fail="onFail"
            @refresh="onRefresh"
            ></slide-verify>
        </div>
    </div>
</template>

<script>
    import {loginapi} from "../apis/api"

    export default {
    data() {
        return {
            input: '',
            pwd:"",
            errTips:false,
            isshow:false
        }
    },
    methods:{
        login(){
            this.isshow=true
            
        },
        //成功事件
        onSuccess(){
            loginapi({
                "account":this.input,
                "password":this.pwd
            })
            .then(res=>{
                console.log(res.data)
                if(res.data.code===0){
                    window.localStorage.setItem("key",JSON.stringify(res.data.id) ); 
                    localStorage.token=res.data.token;
                    localStorage.role=res.data.role;
                    this.$router.push("./home")
                    this.$message({
                        message: '恭喜你，登陆成功',
                        type: 'success'
                        });
                }else{
                    this.errTips=true
                    this.$refs.myverify.reset()
                    this.isshow=false
                }
            })
            

        },
        //失败事件
        onFail(){
            console.log("失败")
        },
        //刷新事件
        onRefresh(){
            console.log("刷新")
        }
    }
    }
</script>

<style lang=less>
    *{
        margin:0;
        padding:0;
    }
    .login-container{
        position:fixed;
        top:0;
        left:0;
        right:0;
        bottom:0;
        background-color:#FDE55D;   
        .login-img{
            width:500px;
            position:absolute;
            left:15%;
            top:15%;
        }
    }
    .login-content{
        padding:30px;
        width:300px;
        position:absolute;
        left:80%;
        top:50%;
        transform: translate(-50%,-50%);
        background-color:lightslategray;
        border-radius: 20px;
    }
    .el-input{
       margin-bottom:15px;

   }
    h5{
        margin-bottom:15px;
        text-align: center;
        color:#fff;
        font-size:24px;
        font-weight: 600;
        color:snow;
    }
    .el-button{
        width:300px;
    }
</style>